<!-- 人才基金-加入协会个人填写申请资料 -->
<template>
    <div class="box">
        <el-header></el-header>
        <div class="center">
            <div class="center-content  c-p">
                <el-form :model="form" label-width="auto" style="max-width: 700px">
                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        个人信息
                    </div>
                    <el-form-item label="姓名">
                        <el-input v-model="form.contact_name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="form.contact_sex" placeholder="请输入" style="width: 100%">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker v-model="form.contact_birthday" :picker-options="pickerOptions" type="date"
                            placeholder="请选择" style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="form.contact_idcard" placeholder="请输入" minlength="18" maxlength="18" />
                    </el-form-item>
                    <el-form-item label="联系地址">
                        <!-- <el-cascader size="large" :options="pcaTextArr" v-model="form.contact_address"
                            @change="handleChange" clearable></el-cascader>
                         -->
                        <el-cascader :options="options" :props="areaProps" v-model="form.contact_address" clearable
                            style="width: 100%">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="form.contact_mobile" placeholder="请输入" minlength="11" maxlength="11" />
                    </el-form-item>
                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        项目及产品介绍
                    </div>
                    <el-form-item label="发展计划">
                        <el-input v-model="form.plan" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="上传专利证明">
                        <el-upload class="avatar-uploader" :action="this.url" name="img"
                            :on-success="handleAvatarSuccessPP" :show-file-list="false"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="form.product_patent" :src="form.product_patent" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="上传产品图片">
                        <el-upload class="avatar-uploader" :action="this.url" name="img"
                            :on-success="handleAvatarSuccessPI" :show-file-list="false"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="form.product_image" :src="form.product_image" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        市场前景
                    </div>
                    <el-form-item label="市场份额占比">
                        <el-input v-model="form.market_share" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="同行业产品优势劣势">
                        <el-input v-model="form.advantages" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        融资计划
                    </div>
                    <el-form-item label="申请金额">
                        <el-input v-model="form.apply_money" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="申请类型">
                        <el-input v-model="form.apply_type" placeholder="请输入" />
                    </el-form-item>
                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        投资分析
                    </div>
                    <el-form-item label="回报率测算">
                        <el-input v-model="form.return_rate" placeholder="请输入" />
                    </el-form-item>
                    <div class="d-flex-items-center m-b-20">
                        <div class="left-shu"></div>
                        个人身份 / 资料
                    </div>
                    <el-form-item label="上传研究成果">
                        <el-upload class="avatar-uploader" :action="this.url" name="img"
                            :on-success="handleAvatarSuccessRF" :show-file-list="false"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="form.research_findings" :src="form.research_findings" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="项目经验">
                        <el-input v-model="form.project_experience" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="rcjjPersonApply">确认提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-footer />

    </div>
</template>

<script>
import { upImgUrl } from '@/utils/baseUrl'
import elFooter from '@/components/elFooter.vue';
import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data'
import ElHeader from '@/components/elHeader.vue';

export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            areaProps: {
                value: "label",
                label: "label",
            },
            form: {
                contact_name: '',
                contact_mobile: '',
                contact_sex: '',
                contact_address: '',
                contact_birthday: '',
                contact_idcard: '',
                plan: '',
                product_patent: '',
                product_image: '',
                market_share: '',
                advantages: '',
                apply_money: '',
                apply_type: '',
                return_rate: '',
                research_findings: '',
                project_experience: '',
            },
            pcaTextArr,
            options: regionData, //级联选择器

            city: ''
        }
    },
    created() {
        this.url = upImgUrl
    },
    mounted() {
    },
    methods: {
        beforeAvatarUpload(file) {
            const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt5M = file.size / 1024 / 1024 < 5;

            if (!isJPGorPNG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                return false;
            }
            if (!isLt5M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
                return false;
            }

            return true;
        },
        //上传产品专利 product_patent
        handleAvatarSuccessPP(res, file) {
            this.form.product_patent = res.info.img_url
        },
        //上传产品图片 product_image
        handleAvatarSuccessPI(res, file) {
            this.form.product_image = res.info.img_url
        },
        //上传研究成果 research_findings
        handleAvatarSuccessRF(res, file) {
            this.form.research_findings = res.info.img_url
        },
        //级联选择器详细数据
        // handleChange(value) {
        //     this.form.contact_address = value.join('/')
        // },
        // 个人申请入会
        async rcjjPersonApply() {
            if (this.form.contact_birthday) {
                const date = new Date(this.form.contact_birthday);
                this.form.contact_birthday = date.toISOString().split('T')[0];
                console.log(this.form.contact_birthday);
            }
            if (this.form.contact_idcard) {
                if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/.test(this.form.contact_idcard)) {
                    this.$message.error('请输入有效的身份证号');
                    this.loading.close();
                    return;
                }
            }
            if (this.form.contact_mobile) {
                if (!/^\d{11}$/.test(this.form.contact_mobile)) {
                    this.$message.error('请输入有效的手机号')
                    return
                }
            }
            this.loading = this.$loading({
                lock: true,
                text: "提交中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_person_apply",
                data: {
                    ...this.form,
                    contact_address: (Array.isArray(this.form.contact_address) ? this.form.contact_address : []).join('/')
                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.$message.success(res.msg);

                this.form = {}
                setTimeout(() => {
                    this.$router.push('/index')
                }, 2000)
            } else {
                this.$message.error(res.msg);
            }
        },
    },
    components: {
        elFooter,
        ElHeader
    }
}
</script>

<style>
body {
    background: #f6f6f6;
}
</style>
<style scoped>
.box {
    height: 100vh;
    overflow-y: auto;
    background: #F6F6F6;
}

.header {
    height: 10%;
    padding: 0 8%;
    width: 84%;
    background: #fff;
}

.center {
    width: 75%;
    margin: 40px auto;
}

.banner {
    width: 100%;
    height: 100%;
}

.bottom {
    width: 76%;
    height: 20%;
    background: #1F252D;
    color: #fff;
    padding: 0 12%;
}

.bottom-desc {
    height: 40%;
    width: 100%;

}

.login-box {
    position: absolute;
    background: #fff;
    z-index: 9;
    right: 20%;
    top: 13%;
    width: 21%;
    padding: 2%;
    border-radius: 20px;
}

.c-0D5FCD {
    color: #0D5FCD;
}

.nav {
    padding: 0 12.5%;
    background: #AC141B;
    height: 5%;
}

.nav-active {
    background: #8B1117;
}

.center-content {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
}

.center-left-title {
    background: #AC141B;
    width: 100%;
    margin: 0 0 5% 0;
    text-align: center;
    color: #fff;
    line-height: 60px;
}

.b-r {
    border-right: 1px solid #DAD8D8;
}

.b-b {
    border-bottom: 1px solid #DAD8D8;
}

.left-box {
    padding: 0 2%;
}

.right-box {
    padding: 0 2%;
}

.left-active {
    background: #F7E5E6 !important;
    border-left: 5px solid #AC141B !important;
    color: #AC141B !important;
    font-weight: bold;
}

.bgc-AC141B {
    background: #AC141B;
}

.sq-btn {
    background: #F7E5E6;
    border-radius: 4px;
    border: 1px solid #AC141B;
    color: #AC141B;
}

.c-AC141B {
    color: #AC141B;
}

.contact {
    background: linear-gradient(180deg, #FFF7F8 0%, #FFFFFF 100%);
    padding: 2%;
}

.left-shu {
    width: 4px;
    height: 14px;
    background: #AC141B;
    margin-right: 10px;
}

.avatar-uploader {
    display: flex;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
    border: 1px dashed #CAC6C5;
}

.avatar {
    width: 148px;
    height: 148px;
    display: block;
}

::v-deep .el-textarea__inner {
    resize: none;
    height: 120px;
}

/* 媒体查询，针对手机设备 */
@media (max-width: 768px) {
    .center {
        width: auto;
        margin: 20px auto;
    }

    .center-content {
        padding: 15px;
    }

    ::v-deep .el-form-item__label-wrap {
        margin-left: 8px !important;
    }

    ::v-deep .el-form-item__content {
        margin-left: 100px !important;
    }

}
</style>